<template>
  <div>
    <div class="tableMain">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="#" width="55"></el-table-column>
        <el-table-column prop="goodsCode" label="商品货号" align="center"></el-table-column>
        <el-table-column prop="barCode" label="商品条码" align="center"></el-table-column>
        <el-table-column prop="goodsName" label="商品" align="center" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.goodsName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="unitName" label="单位" align="center"></el-table-column>
        <el-table-column prop="goodsSpec" label="规格型号" align="center">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.goodsSpec" :key="index">
              <span>{{item.paramName}} :</span>
              <span>{{item.paramValue}} </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="goodsNum" label="数量" align="center" v-if="formdata.retreatDataname=='应收款确认'">
          <template slot-scope="scope">
            <span>{{scope.row.goodsNum}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsPrice" label="单价" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.goodsPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsNum" label="数量" align="center" v-if="formdata.retreatDataname!='应收款确认'">
          <template slot-scope="scope">
            <span>{{scope.row.goodsNum}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsAmount" label="总价" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.goodsAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="confirmtype&&formdata.retreatData" prop="confirmNum" label="采购确认数量" align="center">
        </el-table-column>
        <el-table-column v-if="!confirmtype&&formdata.retreatData" prop="confirmNum" label="确认数量" align="center">
        </el-table-column>
      </el-table>
    </div>
    <el-form :model="formdata" label-width="120px" class="operation" style="margin-top:20px;" size="mini">
      <el-row>
        <el-col :span="5">&nbsp;</el-col>
        <el-col :span="7" v-if="!formdata.retreatData">&nbsp;</el-col>
        <el-col :span="6">
          <el-form-item label="操作员：">
            <!-- <span style='width:80px;display:block;'>{{formdata.userName}}</span> -->
            <el-input type="textarea" v-model="formdata.userName" disabled></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <!-- <span>{{formdata.remark}}</span> -->
            <el-input v-model="formdata.remark" type="textarea" maxlength="50" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品总计：" prop="priceTotal">
            <!-- <span>{{formdata.purchaseAmount}}</span> -->
            <el-input v-model="formdata.saleAmount" disabled></el-input>
          </el-form-item>
          <el-form-item label="运费：" prop="freight">
            <!-- <span>{{formdata.freight}}</span> -->
            <!-- <sd-input :val.sync='formdata.freight' :disableds="disableds"></sd-input> -->
            <el-input v-model="formdata.freight" type="text" disabled></el-input>
          </el-form-item>
          <el-form-item label="应付总计：">
            <!-- <span>{{formdata.amount}}</span> -->
            <el-input v-model="formdata.amount" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="formdata.retreatData">
          <el-form-item label="确认商品总计：" prop="priceTotal">
            <el-input v-model="confirmSaleAmount" disabled></el-input>
          </el-form-item>
          <el-form-item label="确认运费：" prop="freight">
            <sd-input :val.sync='formdata.confirmFreight' :disableds="isConfirm"></sd-input>
            <!-- <el-input v-model="formdata.confirmFreight" type="text" :disabled="isConfirm"></el-input> -->
          </el-form-item>
          <el-form-item label="确认应付总计：">
            <el-input v-model="confirmformdataAllTotal" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1" v-if="formdata.retreatData">&nbsp;</el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import sdInput from "@/components/SdInput";
export default {
  data() {
    return {
      disableds: true
    };
  },
  components: { sdInput },
  props: {
    formdata: {
      type: Object,
      default: {},
      required: true
    },
    confirmtype: {
      type: Boolean,
      default: true,
      required: true
    },
    tableData: {
      type: Array,
      default: [],
      required: true
    },
    isConfirm: {
      type: Boolean,
      default: true,
      required: true
    },
    hasConfirmCai: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  computed: {
    saleAmount: function() {
      let totalPrice = 0;
      this.tableData.forEach(i => {
        i.goodsAmount = i.goodsPrice * i.goodsNum;
        totalPrice += i.goodsPrice * i.goodsNum;
      });
      this.formdata.purchaseAmount = totalPrice.toFixed(2);
      return isNaN(totalPrice) ? 0 : totalPrice.toFixed(2);
      console.log(this.tableData);
    },
    formdataAllTotal: function() {
      let totalPrice = 0;
      totalPrice = Number(this.saleAmount) + Number(this.formdata.freight);
      if (totalPrice == NaN || totalPrice == 0) {
        this.formdata.amount = 0;
        return totalPrice;
      } else {
        this.formdata.amount = totalPrice.toFixed(2);
        return totalPrice.toFixed(2);
      }
    },
    confirmSaleAmount: function() {
      let totalPrice = 0;
      this.tableData.forEach(i => {
        totalPrice += i.goodsPrice * i.confirmNum;
      });
      this.formdata.confirmSaleAmount = totalPrice.toFixed(2);
      return isNaN(totalPrice) ? 0 : totalPrice.toFixed(2);
    },
    confirmformdataAllTotal: function() {
      let totalPrice = 0;
      totalPrice =
        Number(this.confirmSaleAmount) + Number(this.formdata.confirmFreight);
      if (totalPrice == NaN || totalPrice == 0) {
        this.formdata.confirmAmount = 0;
        return totalPrice;
      } else {
        this.formdata.confirmAmount = totalPrice.toFixed(2);
        return totalPrice.toFixed(2);
      }
    }
  },
  methods: {
    changeFun_goods(val) {
      if (val) {
        this.chooseData = val;
      } else {
        this.chooseData = [];
      }
    }
  }
};
</script>
<style>
.operation .el-textarea.is-disabled .el-textarea__inner {
  resize: none;
}
</style>
